<template>
  <div>
    <el-form ref="addskillform" :rules="rules" :model="skillData" label-width="120px">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="skillData.name" placeholder="请输入" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="活动描述" prop="detail_info"> 
        <el-input v-model.number="skillData.detail_info" placeholder="请输入" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="活动开始时间" prop="start_time"> 
        <el-date-picker v-model="skillData.start_time" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" size="small" style="max-width:70%"></el-date-picker>
      </el-form-item>
      <el-form-item label="活动结束时间" prop="end_time"> 
        <el-date-picker v-model="skillData.end_time" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" size="small" style="max-width:70%"></el-date-picker>
      </el-form-item>
      <el-form-item label="发货时间" prop="send_time"> 
        <el-date-picker v-model="skillData.send_time" type="datetime" placeholder="选择发货时间" value-format="yyyy-MM-dd HH:mm:ss" size="small" style="max-width:70%"></el-date-picker>
      </el-form-item>
    </el-form>

    <div>
      <el-button type="primary" plain size="small" @click="disGoods = true">添加商品</el-button>
    </div>

    <!-- 表格 -->
    <div>
      <el-table :data="skillData.goods_list" style="width:100%" stripe>
        <el-table-column prop="id" label="商品ID" align="center"></el-table-column>
        <el-table-column label="商品主图" align="center">
          <template slot-scope="scope" width="80px">
            <div v-if="scope.row.pic_urls!==''">     
              <!-- eslint-disable-next-line  -->
              <l-pic 
                :picurl="scope.row.pic_urls" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column label="设置秒杀属性" align="center">
          <template slot-scope="scope">            
            <el-button class="action-button" type="text" 
              @click="edit(scope.row, scope)"><i class="el-icon-edit"/></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" 
              @click="del(scope.row)" type="text">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="text-align:center;margin-top:10px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>
    </div>

    <!-- 选择商品 -->
    <el-dialog :visible.sync="disGoods" width="50%" title="选择商品" :modal="false">
      <select-goods @selection="getSelectgoods"/>
    </el-dialog>

    <!-- 设置秒杀属性 -->
    <el-dialog :visible.sync="disEdit"  title="设置秒杀属性" :modal="false">
      <el-form :model="skillProp" label-width="80px">
        <div v-for='(item, index) in skillProp.flash_original_price' :key='item.id'>
          <div>{{skillProp.flash_name[index]}}</div>
          <div style="display: flex;">
            <el-form-item label="原价">
              <el-input v-model="skillProp.flash_original_price[index]" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="秒杀价"> 
              <el-input v-model="skillProp.flash_price[index]" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
            <el-form-item label="秒杀数量"> 
              <el-input v-model="skillProp.flash_number[index]" placeholder="请输入" size="small" style="max-width:70%"></el-input>
            </el-form-item>
          </div>
        </div> 
      </el-form>

      <div style="text-align:center">
        <el-button type="primary" size="small" style="padding:8px 30px;" @click="submitProp">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectGoods from './SelectGoods'
import LPic from '@/components/lPic'
import { postSeckill, putSeckill } from '@/api/marketing'

export default {
  name: 'skillAdd',
  components: {
    SelectGoods,
    LPic
  },
  props: {
    isAdd: {// 是否是新增
      type: Boolean,
      required: true,
      default: true
    },
    skillData: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      disGoods: false,
      disEdit: false,
      skillProp: {},
      rules:{
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        detail_info: [
          { required: true, message: '请输入活动描述', trigger: 'blur' }
        ],
        start_time: [
          { required: true, message: '请输入活动开始时间', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请输入活动结束时间', trigger: 'blur' }
        ],
        send_time: [
          { required: true, message: '请输入活动发货时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      this.$refs.addskillform.validate((valid) => {
        if(valid) {
          if(this.isAdd){
            postSeckill(this.skillData).then(response => {
              if(response.status === 200){
                this.$emit('success');
                this.$message.success('添加成功！');
              }else{
                this.$message.error(response.message);
              }
            })
          }else{
            putSeckill(this.skillData).then(response => {
              if(response.status === 200){
                this.$emit('success');
                this.$message.success('修改成功！');
              }else{
                this.$message.error(response.message);
              }
            })
          }
        }
      })    
    },
    /**
     * 打开秒杀设置面板
     */
    edit(data) {
      this.skillProp = data;
      this.disEdit = true;
    },
    /**
     * 提交秒杀设置
     */
    submitProp() {
      this.disEdit = false;
      let index =this.skillData.goods_list.findIndex(e => e.id == this.skillProp.id)
      this.skillData.goods_list[index] = this.skillProp
    },
    /**
     * 删除商品
     */
    del(data) {
      this.skillData.goods_list.find((item,index) => {
        if(item.id === data.id) {
          this.skillData.goods_list.splice(index, 1);
          return true;
        }
      });
      
    },
    /**
     * 获取商品
     */
    getSelectgoods(data) {
      this.disGoods = false;
      data.forEach(item => {
        if(this.skillData.goods_list.find(s => s.id === item.id) === undefined) {
          console.log(item)
          const goods = {
            flash_original_price: item.stock.map(e => e.price),
            flash_id: item.stock.map(e => e.id),
            flash_name: item.stock.map(e => e.name),
            flash_price: item.stock.map(e => e.price),
            flash_number: item.stock.map(e => e.number),
            id: item.id || item.goods_id,
            pic_url: item.pic_urls,
            name: item.name,
            is_top: '0',
            line_price: item.price,
            property1_name: item.stock.map(e => e.property1_name),
            property2_name: item.stock.map(e => e.property2_name)
          };
          this.$emit('addGoodList', {goods: goods})
        }
      });
    }
  },
}
</script>